<template>
  <div class="yearsAnalysis_wrap">
    <span class="mr-8">日期</span>
    <el-date-picker
      class="mr-8 update-el-date"
      v-model="dateTime"
      type="year"
      format="yyyy"
      value-format="yyyy"
      @change="changeDate"
      placeholder="选择日期"
    >
    </el-date-picker>
    <el-button type="primary" @click="handleSearch">查询</el-button>
    <div class="info_wrap">
      <div class="info_item">
        <div class="title">年指标</div>
        <div class="number">{{ performanceAnalysis.sellTarget || 0 }}</div>
      </div>
      <div class="info_item">
        <div class="title">年业绩</div>
        <div class="number">{{ performanceAnalysis.salesAmount || 0 }}</div>
      </div>
      <div class="info_item">
        <div class="title">环比</div>
        <div class="number_lv">{{ performanceAnalysis.chainRatio || 0 }}%</div>
      </div>
      <div class="info_item">
        <div class="title">年业绩达成率</div>
        <div class="number">
          {{ performanceAnalysis.achievementRate || '0' }}%
        </div>
      </div>
      <div class="info_item">
        <div class="title">年指标缺口</div>
        <div class="number_red">{{ performanceAnalysis.rabbet || 0 }}</div>
      </div>
    </div>
    <div class="tubiao_container">
      <div class="null_data_one" v-if="ye_ji_dachengData.length === 0">
        暂无数据
      </div>
      <div
        id="leftEcharts"
        style="width: 1500px; height: 400px; margin-top: 30px"
      ></div>
      <div class="null_data_two" v-show="ye_ji_zoushiData.length === 0">
        暂无数据
      </div>
      <div
        id="rightEcharts"
        style="width: 1500px; height: 400px; margin-top: 30px"
      ></div>
    </div>
  </div>
</template>
<script>
import { yearPerformanceAnalysis } from '@/request/store/K_PerformanceAnalysis'
import { getCurrentMonthFirst, deepClone } from '@/util/util'
export default {
  name: 'yearsAnalysis',
  data() {
    return {
      ye_ji_dachengData: [],
      ye_ji_zoushiData: [],
      dateTime: '',
      performanceAnalysis: {},
      topOption: {
        title: {
          text: '业绩达成率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['年业绩', '年目标']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '年业绩',
            type: 'bar',
            data: [],
            color: '#017aff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          },
          {
            name: '年目标',
            type: 'bar',
            data: [],
            color: '#67afff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          }
        ]
      },
      bottomOption: {
        title: {
          text: '业绩走势图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            data: [],
            color: '#017aff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          },
          {
            name: '',
            type: 'bar',
            data: [],
            color: '#67afff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          },
          {
            name: '',
            type: 'bar',
            data: [],
            color: '#b2d7ff',
            label: {
              normal: {
                show: true, //显示数字
                position: 'top', //这里可以自己选择位置
                color: '#000',
                formatter: (params) => {
                  let result = [],
                    counter = 0,
                    num = params.data
                  num = (num || 0).toString().split('')
                  for (let i = num.length - 1; i >= 0; i--) {
                    counter++
                    result.unshift(num[i])
                    if (!(counter % 3) && i != 0) {
                      result.unshift(',')
                    }
                  }
                  result = result.join('')
                  return result
                }
              }
            }
          }
        ]
      }
    }
  },

  mounted() {
    this.createTopEchart()
    this.createBottomEchart()
    let date = getCurrentMonthFirst(false)
    let year = date.split('-')[0]
    this.dateTime = year
    this.yearPerformanceAnalysis(year)
  },
  computed: {
    numFun(params) {
      return '0'
    }
  },
  methods: {
    // 获取数据
    async yearPerformanceAnalysis(date) {
      const requestData = {
        year: date
      }
      const { data } = await yearPerformanceAnalysis(requestData)
      this.ye_ji_dachengData = data.data.achievementRateList
      this.ye_ji_zoushiData = data.data.performanceChartList
      console.log(data, '年累积分析')
      if (data && data.code === 200) {
        this.performanceAnalysis = data.data
        this.setTopOption()
        this.setBottomOption()
      }
    },
    handleSearch() {},
    createTopEchart() {
      let myChart = this.$echarts.init(document.getElementById('leftEcharts'))
      myChart.setOption(this.topOption)
    },
    createBottomEchart() {
      let myChart = this.$echarts.init(document.getElementById('rightEcharts'))
      myChart.setOption(this.bottomOption)
    },
    // 设置 业绩达成率 图表
    setTopOption() {
      let achievementRateList =
        this.performanceAnalysis && this.performanceAnalysis.achievementRateList
      let option = deepClone(this.topOption)
      let RateList = deepClone(achievementRateList)
      RateList.forEach((item) => {
        if (item.month) {
          let month = `${item.month.split('-')[1]}月`
          option.xAxis[0].data.push(month)
          option.series[0].data.push(item.sellTarget)
          option.series[1].data.push(item.salesAmount)
        }
      })
      // console.log(option)
      this.topOption = option
      this.createTopEchart()
    },
    // 设置 业绩走势图、
    setBottomOption() {
      let option = deepClone(this.bottomOption)
      let performanceChartList =
        this.performanceAnalysis &&
        this.performanceAnalysis.performanceChartList
      let chartList = deepClone(performanceChartList)
      let firstArrList = []
      chartList.forEach((item, index) => {
        // 获取月份 (获取每一个数组里面的数组的第一项的月份(因为其他数组的月份一样的只是年份不一样))
        let month =
          chartList[index] &&
          chartList[index][0] &&
          chartList[index][0].month &&
          chartList[index][0].month.split('-')[1]
        let newMonth = `${month}月`
        // 获取年份(只需要获取一个数组就可以了，因为一个数组里面有三个对象了，都包含了最近的三年)
        firstArrList = chartList[0]
        option.xAxis[0].data.push(newMonth)

        // 设置 legend 和 series[index].name
        firstArrList.forEach((item, index) => {
          if (item.month) {
            let year = item.month.split('-')[0]
            option.legend.data.push(year)
            option.series[index].name = year
          }
        })
        // 获取 每个月份里面最近三年的数据
        let itemDetailList = item

        // 方法一,使用配置项的年份跟数据的年份进行匹配
        let seriesData = option.series
        seriesData.forEach((it, ind) => {
          if (itemDetailList[ind] && itemDetailList[ind].month) {
            let itYear = itemDetailList[ind].month.split('-')[0]
            if (it.name === itYear) {
              let salesAmount = itemDetailList[ind].salesAmount
              option.series[ind].data.push(salesAmount)
            }
          }
        })
        // 方法二，使用上面 month 跟下面的 month 和年份进行匹配
        // itemDetailList.forEach((it, ind) => {
        //   // console.log(option.series[ind].name);
        //   if (it.month) {
        //     let itYear = it.month.split('-')[0]
        //     let itMonth = it.month.split('-')[1]
        //     let sYear = option.series[ind].name
        //     if (itYear === sYear && itMonth === month) {
        //       // console.log(it.salesAmount)
        //       option.series[ind].data.push(it.salesAmount)
        //     }
        //   }
        // })
      })
      // console.log(option, 'option')
      this.bottomOption = option
      this.createBottomEchart()
      // console.log(chartList)
    },
    // 查询并清空之前的数据
    handleSearch() {
      this.yearPerformanceAnalysis(this.dateTime)
      let topOption = deepClone(this.topOption)
      let bottomOption = deepClone(this.bottomOption)
      topOption.xAxis[0].data = []
      topOption.series[0].data = []
      topOption.series[1].data = []
      bottomOption.xAxis[0].data = []
      bottomOption.series[0].data = []
      bottomOption.series[1].data = []
      bottomOption.series[2].data = []
      this.topOption = topOption
      this.bottomOption = bottomOption
      this.createTopEchart()
      this.createBottomEchart()
      // console.log(topOption)
    },
    changeDate(date) {
      this.dateTime = date
    }
  }
}
</script>

<style lang="less" scoped>
.tubiao_container {
  position: relative;
  .null_data_one {
    position: absolute;
    top: 150px;
    left: 600px;
  }
  .null_data_two {
    position: absolute;
    top: 600px;
    left: 600px;
  }
}

.yearsAnalysis_wrap {
  background-color: #fff;
  .info_wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin-top: 16px;
    height: 120px;
    border-radius: 10px;
    background-color: #f7f7f7;
    .info_item {
      // width: 120px;
      height: 80px;
      .title {
        margin-top: 13px;
        color: #959595;
      }
      .number {
        font-weight: 700;
        font-size: 20px;
        color: #017aff;
      }
      .number_lv {
        font-weight: 700;
        font-size: 20px;
        color: #59c01f;
      }
      .number_red {
        font-weight: 700;
        font-size: 20px;
        color: #fb4d4d;
      }
    }
  }
  .echarts_wrap {
    display: flex;
  }
}
</style>
